<template>
  <div class="PageA">
    <navbar>
      <div slot="right" class="right-img">
          <img  @click="rightimg()" src="../../assets/img/jiajia.png" alt="" />
      </div>
      <div slot="center">时装秀</div>
      <div slot="left" class="left-img">
          <img @click="fan" src="../../assets/img/la.png" />
      </div>
    </navbar>

    <div class="contentC">
      <div class="anniu">
        <button v-for="(item, index) in navbutton"
          :key="index" @click="buttonBar(index)" :style="{ color: buttonIndex == index ? 'skyblue' : 'black' }">{{ item }}</button>
      </div>

      <ul class="block">
        <li class="chunk"  @click="imgcheage()" v-for="item in Arr" :key="item.text">
          <div class="chunkA">
            <div class="chunkB">
              <img :src="item.lujing" alt="" />
              <span>{{ item.text }}</span>
            </div>
            <div class="chunkC">
              <span>{{ item.text1 }}</span>
              <div class="chunkD">
                <button>{{ item.text2 }}</button>
                <button>{{ item.text3 }}</button>
              </div>
            </div>
            <div class="chunkE">
              <img :src="item.lujing1" alt="" />
              <span>{{ item.text4 }}</span>
            </div>
          </div>
        </li>
      </ul>

    </div>
  </div>
</template>

<script>
import navbar from "../../components/navbar/navbar";
export default {
  name: "Latest",
  components: {
    navbar,
  },
  methods: {
    fan() {
      this.$router.back();
    },
    buttonBar(i) {
      this.buttonIndex = i;
    },
    imgcheage(){
      this.$router.push('/Latest/LatestDetail')
    },
    rightimg(){
      this.$router.push('/j5-5-1')
    }
  },
  data() {
    return {
      navbutton: ["推荐", "新人"],
      buttonIndex: 0,
      Arr: [
        {
          lujing: require("../../assets/img/huizhang.png"),
          lujing1: require("../../assets/img/yanjing.png"),
          text: "No.1",
          text1: "小芳",
          text2: "旅游",
          text3: "好厨",
          text4: "500",
        },
        {
          lujing: require("../../assets/img/huizhang.png"),
          lujing1: require("../../assets/img/yanjing.png"),
          text: "No.2",
          text1: "小芳",
          text2: "旅游",
          text3: "好厨",
          text4: "500",
        },
        {
          lujing: require("../../assets/img/huizhang.png"),
          lujing1: require("../../assets/img/yanjing.png"),
          text: "No.3",
          text1: "小芳",
          text2: "旅游",
          text3: "好厨",
          text4: "500",
        },
        {
          lujing: require("../../assets/img/huizhang.png"),
          lujing1: require("../../assets/img/yanjing.png"),
          text: "No.4",
          text1: "小芳",
          text2: "旅游",
          text3: "好厨",
          text4: "500",
        },
        {
          lujing: require("../../assets/img/huizhang.png"),
          lujing1: require("../../assets/img/yanjing.png"),
          text: "No.5",
          text1: "小芳",
          text2: "旅游",
          text3: "好厨",
          text4: "500",
        },
        {
          lujing: require("../../assets/img/huizhang.png"),
          lujing1: require("../../assets/img/yanjing.png"),
          text: "No.6",
          text1: "小芳",
          text2: "旅游",
          text3: "好厨",
          text4: "500",
        },
      ],
    };
  },
};
</script>

<style scoped>
.anniu {
  width: 100%;
  display: flex;
  position: sticky;
  top:50px;
  z-index: 6;
}
.anniu button {
  flex: 1;
  height: 40px;
  font-size: 16px;
}
.block {
  margin-top: 50px;
  width: 100%;
  padding: 0;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  list-style-type: none;
}
.chunk {
  width: 50%;
  justify-content: center;
  justify-items: center;
  text-align: center;
  display: flex;
}
.chunkA {
  display: block;
  width: 100%;
  height: 200px;
  margin: 5px 10px 5px 10px;
  background-color: turquoise;
}
.chunkB {
  width: 50px;
  height: 50px;
  display: flex;
  position: relative;
}
.chunkB img {
  position: relative;
  width: 50px;
  height: 50px;
  top: 5px;
  left: 5px;
}
.chunkB span {
  display: block;
  position: absolute;
  top: 18px;
  left: 15px;
}
.chunkC {
  width: 100px;
  display: block;
  height: 60px;
  top: 90px;
  position: relative;
}
.chunkC span {
  display: block;
  width: 40px;
  position: relative;
  bottom: -10px;
  left: 5px;
}
.chunkD {
  display: flex;
  width: 80px;
  height: 20px;
  left: 10px;
  position: absolute;
  bottom: 5px;
}
.chunkD button:nth-of-type(1) {
  width: 40px;
  border: none;
  background-color: rgb(235, 165, 80);
  color: aliceblue;
}
.chunkD button:nth-of-type(2) {
  width: 40px;
  border: none;
  background-color: rgb(80, 129, 235);
  color: aliceblue;
}
.chunkE {
  width: 50%;
  height: 17px;
  top: 65px;
  position: relative;
}
.chunkE img {
  width: 25px;
  height: 20px;
  object-fit: cover;
  top: 5px;
  right: -80px;
  position: relative;
}
.chunkE span {
  display: block;
  right: -80px;
  top: 3px;
  position: absolute;
}
.left-img img {
  width: 30px;
  height: 30px;
  margin: 10px;
}

.right-img img {
  width: 30px;
  height: 30px;
  margin: 10px;
}
</style>


